<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head">
</head>
<body class="layui-layout-body">

    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
            <a onclick="add()" class="layui-btn">添加菜单</a>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>菜单列表</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs3">
                <div style="display: inline-block; width: 100%; height: 100%; padding: 10px;">
                    <ul id="demo"></ul>
                </div>
            </div>
            <div class="layui-col-xs9" style="height: 750px">
                <div style="display: inline-block; width: 100%; height: 100%; padding: 10px">
                    <iframe id="showMenu" scrolling="yes" frameborder="0"
                            style="width:100%;height:100%;overflow:visible;background:#fff;"></iframe>
                </div>
            </div>
        </div>
    </div>


<div th:replace="commons :: script"></div>

</body>
</html>
<script type="text/javascript">
    layui.use(['table', 'layer', 'jquery', 'util', 'tree'], function () {
        var table = layui.table
            , layer = layui.layer
            , tree = layui.tree
            , $ = layui.$;

        //加载菜单树
        $.ajax({
            type: "get",
            url: basePath + '/sys/menu/tree',
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                tree({
                    elem: '#demo' //传入元素选择器
                    , nodes: data
                    , click: function (node) {
                        // layer.alert(node.url);
                        var url = basePath + "/sys/menu/form?id=" + node.id;
                        $("#showMenu").attr("src", url);
                    }
                });
            }
        });


        //点击事件
        active = {
            //表格重载
            reload: function () {
                var name = $('#nameReload').val();
                tableReload({name: name})
            }
        };
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    //添加页面
    function add() {
        open(basePath + "/sys/menu/add", '添加菜单', 700, 800);
    }

</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>